<template>
  <view class="">
    <view :style="['height:' + cap_btnTopHei, ...navbjStyle]">
      <view :style="'height:' + cap_btn_top"></view>
      <view
        class="navBack"
        :style="['height:' + cap_btnhei, 'line-height:' + cap_btnhei, ...titleStyle]"
      >
        <!-- 返回按钮 -->
        <view
          @click="backEvent"
          :style="[navbackStyle]"
          class="iconfont icon-icon-arrow-left navBackBtn"
        ></view>
        <!-- 标题 -->
        {{ title }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, toRefs, reactive, defineProps } from "vue";
const { title } = defineProps({
  title: {
    type: String || Number,
    default: "",
  },
  titleStyle: {
    type: Array,
    default: [],
  },
  navbackStyle: {
    type: Array,
    default: [""],
  },
  navbjStyle: {
    type: Array,
    default: [],
    // default: ["background: #fff"],
  },
  backEvent: {
    type: Function,
    default: () => {
      uni.navigateBack({
        fail: () => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
        success: () => {
          let page = getCurrentPages().pop();
          if (page) {
            page.onLoad(page.options); //执行上个页面的方法
          }
        },
      });
    },
  },
});
// 存储胶囊底部距离顶部的距离 单位需要默认给浏览器
let cap_btn_data = reactive({
  cap_btnTopHei: "80rpx",
  cap_btn_top: "0rpx",
  cap_btnhei: "80rpx",
  // navBackWidth: '100%',
});
let { cap_btnTopHei, cap_btn_top, cap_btnhei } = toRefs(cap_btn_data);
// 获取胶囊位置
onMounted(() => {
  // 判断是否为小程序
  if (uni.getSystemInfoSync().hostName === "WeChat") {
    getCat_btn_data();
  }
});
// 获取胶囊的位置进行定位
function getCat_btn_data() {
  let cat_btn = uni.getMenuButtonBoundingClientRect();
  cap_btn_data.cap_btnTopHei = cat_btn.bottom + "px;";
  cap_btn_data.cap_btn_top = cat_btn.top + "px;";
  cap_btn_data.cap_btnhei = cat_btn.height + "px;";
  // cap_btn_data.navBackWidth = cat_btn.left + 'px;'
}
// 封装标题或者返回事件
</script>

<style scoped>
.navBack {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 33rpx;
  font-weight: 700;
  color: #000000;
}
/* 导航栏标题和返回按钮样式 */
.navTitle {
  flex: 1;
  text-align: center;
}
.navBackBtn {
  font-size: 28rpx;
  font-weight: 700;
  color: #000000;
}
</style>
